<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@page isELIgnored="false" %>

<html>
<head>
	<title>CREATE PROPERTY FORM</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/resources/js/dynamic_list_helper.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/navbar.css" media="screen" />
</head>

<body>

	<div id="navbar">
		<ul>
			<li><a href="${pageContext.request.contextPath}/viewAll">Home</a></li>
			<li><a href="${pageContext.request.contextPath}/createPropertyForm">Create</a></li>
		</ul>
	</div>
	
	<hr />

	<form:form modelAttribute="propertyForm" action="createProperty" method="post" id="newPropertyForm">

		<form:errors path="*">
			<div class="msg error">
				<h4>ATTENTION!</h4>
				<p>Please make the following correction(s) before proceeding.</p>
			</div>
		</form:errors>

		<fieldset>
			<legend>Property Information</legend>

			<div class="help icon astrisk">required</div>
			<form:label path="name">Name</form:label>
			<form:input path="name" />
			<br> <br>

			<div class="help icon astrik">required</div>
			<form:label path="value">Value</form:label>
			<form:input path="value" />
			<br> <br>

			<div class="help icon astrisk">optional</div>
			<div id="tagsList">
				<c:forEach items="${propertyForm.tags}" var="Tag" varStatus="i" begin="0">
					<div class="tag">
						<input type="text" name="tags[].value" value="${Tag.value}" />
						<a href="#" class="removeTag">Remove</a>
						<hr />
					</div>
				</c:forEach>
			</div>
			
			<a href="#" id="addTag">Add</a> 
			<hr />

			<div class="field">
				<div class="input">
					<input type="submit" class="button primary" value="Create" />
				</div>
			</div>

		</fieldset>

	</form:form>
	
	<script type="text/javascript">
            function rowAdded(rowElement) {
                //clear the imput fields for the row
                $(rowElement).find("input").val('');
                //may want to reset <select> options etc
                
                //in fact you may want to submit the form
                saveNeeded();
            }
            function rowRemoved(rowElement) {
                saveNeeded();
                alert( "Removed Row HTML:\n" + $(rowElement).html() );
            }
            
            function saveNeeded() {
                $('#submit').css('color','red');
                $('#submit').css('font-weight','bold');
                if( $('#submit').val().indexOf('!') != 0 ) {
                    $('#submit').val( '!' + $('#submit').val() );
                }
            }
            
            function beforeSubmit() {
//                 alert('submitting....');
                return true;
            }
            $(document).ready( function() {
                var config = {
                    rowClass : 'tag',
                    addRowId : 'addTag',
                    removeRowClass : 'removeTag',
                    formId : 'newPropertyForm',
                    rowContainerId : 'tagsList',
                    indexedPropertyName : 'tags',
                    indexedPropertyMemberNames : 'value',
                    rowAddedListener : rowAdded,
                    rowRemovedListener : rowRemoved,
                    beforeSubmit : beforeSubmit
                };
                new DynamicListHelper(config);
            });
    </script>
</body>
</html>